<template>
    <rx-layout>
        <template #middle>
            <rx-fit   v-model="fitSearch">
                <template #head>
                    <div style="display: flex;align-items: center;justify-content: space-between;">
                        <div class="table-operator">
                            <a-button type="primary" style="margin-left: 10px;" @click="add()">
                                <template #icon>
                                    <plus-outlined/>
                                </template>
                                {{ $ti18('rxList.newBtn', '新建') }}
                            </a-button>
                            <a-button v-if=" selectedRowKeys.length > 0 ||  selectedRowKeys.length > 0"
                                      type="primary" danger style="margin-left: 10px;" @click="delByIds(selectedRowKeys)">
                                <template #icon>
                                    <DeleteOutlined />
                                </template>
                                {{ $ti18('rxList.delBtn', '删除') }}
                            </a-button>
                        </div>
                        <span class="search-btn" @click.stop="searchshow" @mousedown.stop><SearchOutlined/>{{ $ti18('rxList.leachBtn', '过滤') }}</span>
                    </div>
                </template>
                <template #search>
                    <rx-fit>
                        <template #middle>
                            <a-form layout="vertical">
                                <a-form-item :label="i18n('form.modelName','名称')">
                                    <a-input :placeholder="i18n('form.modelName','名称')"
                                             v-model:value="urlConfig.queryParam.Q_NAME__S_LK"/>
                                </a-form-item>
                            </a-form>
                            <div class="list-search-toolbar">
                                <a-button type="primary" @click="search">
                                    <SearchOutlined/>
                                    {{ $ti18('rxList.searchBtn', '查询') }}
                                </a-button>
                                <a-button style="margin-left: 4px" @click="resetSearch">
                                    {{ $ti18('rxList.resetBtn', '重置') }}
                                </a-button>
                            </div>
                        </template>
                    </rx-fit>
                </template>
                <template #middle>
                        <rx-grid
                            ref="table"
                            :columns="columns"
                            url="/api-screen/screen/core/screenChartManage/query"
                            :hasPage="true"
                            field="ID_"
                            :urlConfig="urlConfig"
                            :selectConfig="selectConfig"
                            @selectMethod="onSelectMethod"
                        >
                            <template #name="{row}">
                                    <span>{{ $i18(row.name) }}</span>
                            </template>
                            <template #action="obj">
                                <RxGridAction :size="2">
                                    <span @click="edit(obj.row)">{{ $ti18('rxList.editBtn', '编辑') }}</span>
                                    <span @click="delByIds([obj.row.id])">{{ $ti18('rxList.delBtn', '删除') }}</span>
                                </RxGridAction>
                            </template>
                        </rx-grid>
                </template>
            </rx-fit>
        </template>
    </rx-layout>
</template>

<script>
import ScreenChartManageApi from '@/api/screen/core/screen-chart-manage.js'
import {RxGrid, RxLayout, Util, BaseList, RxGridAction, RxFit} from '@lowcode/jpaas-base-lib';
import useMain from "../../../../stores/use-main";
import {mapState} from 'pinia';
import ScreenChartManage from "./screen-chart-manage.vue"
import { App } from '@lowcode/jpaas-share-component';
export default {
    name: "ScreenChartManageList",
    mixins: [BaseList,App],
    components: {
        RxGrid,
        RxLayout,
        RxGridAction,
        RxFit
    },
    computed: {
        ...mapState(useMain, ["appId"])
    },
    props: {},
    data() {

        return {
            comment:this.i18n('common.chart',"图表"),
            component:ScreenChartManage,
            columns: [
                {title: this.$ti18("rxForm.name", "名称"), field: 'name',slots: {default: 'name'}},
                {title: this.$ti18('rxForm.alias', '别名'), field: 'alias'},
                {title: this.$ti18('rxForm.createTime', '创建时间'), field: 'createTime'},
                {
                    title: this.$ti18('rxList.action', '操作'),
                    width: 100,
                    field: 'action',
                    fixed: 'right',
                    showOverflow: false,
                    slots: {default: 'action'}
                }
            ],
            urlConfig: {
                ajaxType: 'post',//请求类型 post/get
                contentType: 'json',//类容类型
                queryParam: {},//请求参数
                //dataField,根据返回的参数来确定取哪一层的数据 如 res = { data:[] } ->  dataField:'data'
                // 如 res = { list:{data:[]} } -> dataField:'list.data' 依次类推;
                dataField: 'result.data',
                totalField:'result.totalCount'
            },
            selectConfig: {
                type: 'checkbox',//checkbox复选 / radio单选
                width: '60',
                trigger: 'row',//触发条件 row点击行 cell点击单元格 default点击控件本身
                checkMethod: ""
            },
            data: [],
        }
    },
    created() {
        let appId = this.appId;
        if (appId) {
            this.urlConfig.queryParam.Q_APP_ID__S_EQ = appId;
        }
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "screenLang", key);
        },
        delById(ids) {
            return ScreenChartManageApi.del({ids: ids.join(',')});
        },
        search() {
            this.$refs.table.loadData()
        },
        resetSearch() {
            this.urlConfig.queryParam = {}
            this.$nextTick(() => {
                this.urlConfig.queryParam = {};
                let appId = this.curApp.appId;
                if (appId) {
                    this.urlConfig.queryParam.Q_APP_ID__S_EQ = appId;
                }
                this.$refs.table.loadData();
            })
        },
    },
    watch: {},
}
</script>

<style scoped>
.table-operator {
    padding: 4px;
}

.table-operator button {
    margin: 2px;
}
</style>
